<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<script type="text/javascript">

    let count = 0;
    let uuid;
    setInterval(()=>{
        console.log("开启计时")
        count ++
        if (count%5 === 0 ){
            console.log("请求后端接口")
            axios.get("http://localhost:8080/getUser?uuid=" + uuid, {params: null,responseType:'json'}).then((response) => {
                console.log("返回数据openid：" + response.data.openid)
                var data = response.data
                if (data != null){
                    if (data.openid != null){
                        console.log(data.openid)
                        window.location.href = 'http://localhost:8080/user.html?uuid=' + uuid
                    }
                }
            })
        }

    },1000)

    $(function (){
        $("#showQrPic1").click(function (){
            uuid = generateUUID()
            axios.get("http://localhost:8080/wxLogin?uuid=" + uuid, {params:null,responseType:'blob'}).then((response) =>{
                console.log(response)
                const url = URL.createObjectURL(response.data)
                document.querySelector("#qrPic1").setAttribute('src', url)
            });
        });
    });

    $(function (){
        $("#showQrPic2").click(function (){
            uuid = generateUUID()
            axios.get("http://localhost:8080/wx/qrcode?uuid=" + uuid, {params:null,responseType:'json'}).then((response) =>{
                console.log('ticket',response.data.ticket)

                document.querySelector("#qrPic2").setAttribute('src', response.data.qrCodeUrl)
            });
        });
    });
    function generateUUID() {
        var d = new Date().getTime(); //Timestamp
        var d2 = (performance && performance.now && (performance.now()*1000)) || 0; //Time in microseconds since page-load or 0 if unsupported
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
            var r = Math.random() * 16; //random number between 0 and 16
            if(d > 0) { //Use timestamp until depleted
                r = (d + r)%16 | 0;
                d = Math.floor(d/16);
            } else { //Use microseconds since page-load if supported
                r = (d2 + r)%16 | 0;
                d2 = Math.floor(d2/16);
            }
            return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
        });
    }

</script>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <div>
     <input style="width: 20%;height: 50%; font-size: 15px;margin-left: 20px;margin-bottom: 20px" id = "showQrPic1" type="submit" value="微信登陆1">
 </div>

 <div>
     <input style="width: 20%;height: 50%; font-size: 15px;margin-left: 20px;margin-bottom: 20px" id = "showQrPic2" type="submit" value="微信登陆2">
 </div>
<div>
    <div>扫码一</div>
    <img id="qrPic1">
</div>
 <div>
     <div>扫码二</div>
     <img id="qrPic2" style="width: 300px;height: 300px">
 </div>
</body>
</html>
